<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>辅助字典</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" href="../../../layuiadmin/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" th:href="@{/css/layui-form-extend.css}">
    <link rel="stylesheet" th:href="@{/layuiadmin/lib/extend/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/layuiadmin/lib/extend/dtree/font/dtreefont.css}">
</head>
<body>
<div style="padding: 5px">
    <blockquote class="layui-elem-quote">系统辅助字典</blockquote>
    <div id="divTree" class="layui-col-md4" style="height: 800px;overflow: auto;">
        <ul id="dictTree" class="dtree" data-id="0"></ul>
    </div>

    <div id="divForm" class="layui-col-md8 layui-hide">
        <form id="lay-form" class="layui-form" lay-filter="lay-form"
              enctype="multipart/form-data" method="post">
            <div class="layui-form-item">
                <label for="quotaName" class="layui-form-label lay-required">字典名称：</label>
                <div class="layui-input-inline">
                    <input type="text" id="quotaName" name="quotaName" class="layui-input lay-required" lay-verify="required"
                           autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="quotaNameEn" class="layui-form-label lay-required">字典辅记词：</label>
                <div class="layui-input-inline">
                    <input type="text" id="quotaNameEn" name="quotaNameEn" class="layui-input lay-required" lay-verify="required"
                           autocomplete="off">
                </div>
                <div class="layui-word-aux layui-form-mid">
                    建议使用英文命名
                </div>
            </div>

            <div class="layui-form-item">
                <label for="quotaLevel" class="layui-form-label lay-required">字典级别：</label>
                <div class="layui-input-inline">
                    <input type="text" id="quotaLevel" name="quotaLevel" class="layui-input lay-required" lay-verify="required"
                           autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="sort" class="layui-form-label lay-required">字典顺序：</label>
                <div class="layui-input-inline">
                    <input type="text" id="sort" name="sort" class="layui-input lay-required" lay-verify="required"
                           autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="quotaDesc" class="layui-form-label lay-required">指标描述：</label>
                <div class="layui-input-block">
                    <textarea type="text" id="quotaDesc" name="quotaDesc" class="layui-textarea lay-required" lay-verify="required"
                              autocomplete="off"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="lay-submit">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script th:src="@{/js/hope.jquery.form.js}"></script>

<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径

    }).extend({
        index: 'lib/index', //主入口模块
        dtree: '../lib/extend/dtree/dtree'
    }).use(['index', 'form', 'upload', 'dtree'], function () {
        var $ = layui.$
            , dtree = layui.dtree;

        myOption = {
            my$: $,
            layerOpenOption: {
                title: '辅助字典-添加',
                content: 'add.html'
            },
            submitOption: {
                layFormId: 'lay-form',
                submitId: 'lay-submit'
            }
        };

        var dictTree = dtree.render({
            elem: '#dictTree',  //绑定元素
            width: 'full-50',
            scroll: '#divTree',
            request: {"nodeId": "0"},
            toolbar: 'false',
            url: '/system/dict/getDTree',
            toolbarShow: [''],
            toolbarExt: [
                {
                    //添加节点
                    toolbarId: 'btnAdd',
                    icon: 'dtree-icon-roundaddfill',
                    title: '添加子节点',
                    handler: function (treeNode, $div) {
                        //设置弹窗参数
                        myOption.layerOpenOption.content = "add.html?parentId=" + treeNode.nodeId
                        myOption.layerOpenOption.title = "父级字典:"+treeNode.context+"";
                        //限制不能添加第三层目录
                        if(treeNode.level >= 3){
                            layer.alert('无法继续添加，暂只支持三级目录')
                            return false;
                        }
                        console.log(JSON.stringify(treeNode));
                        layerOpenJqueryForm(myOption, function (result) {
                            //console.log("指标添加结果：" + JSON.stringify(data))
                            if (result.code === 0) {
                                dictTree.partialRefreshAdd($div);
                                layer.msg('保存成功');
                                //window.location.reload();
                            } else {
                                layer.alert('保存失败：' + JSON.stringify(result.msg));
                            }
                        });
                    }
                },

                {
                    //修改节点
                    toolbarId: 'btnEdit',
                    icon: 'dtree-icon-bianji',
                    title: '编辑此节点',
                    handler: function (treeNode, $div) {
                        //layer.msg(JSON.stringify(treeNode));
                        var indexEdit = layer.open({
                            type: 2,
                            title: '当前节点-编辑',
                            content: 'edit?dictId=' + treeNode.nodeId + '&parentId=' + treeNode.parentId,
                            maxmin: true,
                            area: ['50%', '50%'],
                            btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                submitJqueryForm(myOption,index,layero,function(result){
                                    if(result.code === 0){
                                        dictTree.partialRefreshEdit($div, result.entity.context)
                                        //dictTree.partialRefreshEdit($div, result.entity); // 配套使用
                                        layer.msg('保存成功');
                                        layer.close(indexEdit);
                                    }else{
                                        layer.alert('保存失败');
                                    }
                                });
                            }
                        });
                    }
                },

                {
                    //删除节点
                    toolbarId: 'btnDelete',
                    icon: 'dtree-icon-delete1',
                    title: '删除此节点',
                    handler: function (treeNode, $div) {
                        console.log(JSON.stringify(treeNode));
                        layer.confirm('确定要删除此节点？', function () {
                            if(treeNode.leaf){
                                $.ajax({
                                    type: 'get',
                                    data: {'nodeId': treeNode.nodeId},
                                    url: '/system/dict/delete',
                                    success: function (result) {
                                        if (result.code === 0) {
                                            dictTree.partialRefreshDel($div);
                                            layer.msg('删除成功');
                                        } else {
                                            layer.alert('删除失败');
                                        }
                                    }
                                });
                            } else {
                                layer.alert('无法删除，因该节点存在子节点');
                                return false;
                            }

                        })
                    }
                }
            ],
            success: function () {
                //dtree加载完毕，显示form层
                //$("#divForm").removeClass('layui-hide');
            }
        });

        dtree.on("node(dictTree)", function (obj) {
            if(!obj.param.leaf){
                var $div = obj.dom;
                dictTree.clickSpread($div);  //调用内置函数展开节点
            } else {
                layer.msg("此节点无法展开");
            }

            console.log(JSON.stringify(obj.param));
        });
    })
</script>
</body>
</html>